<template>
  <div class="serveNo">
    <page-box class="serve-pagebox">
      <template #top>
        <alert-msg content="服务号：即呼入中继号码，可用于绑定400号码，客户拨叫此号码呼叫系统分配员工接待。">
          <template #icon>
            <i class="MC_iconfont MC_icon-xinxi-mian"></i>
          </template>
        </alert-msg>
      </template>
      <template #search>
        <search-form class="search-form" :fieldList="fieldList" :form="form" @onSearchFun="searchFun"></search-form>
      </template>
      <template #btn>
        <el-button type="default" class="search-btn" @click="searchFun">查询</el-button>
      </template>
      <template #table>
        <resize-table
          :topHeight="104"
          :headers="tableHeaders"
          :data="tableData"
          :pagingData="pagingData"
          @onPageChange="handleCurrentChange"
          @onPageSizeChange="handleSizeChange"
          @onCheckHeadersChange="checkHeadersChange"
          :showPagination="true"
          :batchs="batchs"
        >
          <template #oprate="{ scope }">
            <span class="edit" @click="editServeNo(scope.row)">编辑</span>
          </template>
        </resize-table>
      </template>
    </page-box>
    <resize-drawer
      title="编辑服务号"
      @onCloseDraw="closeDraw"
      @onCancelFun="cancelFun"
      @onSave="saveFun"
      :isShowMoreBtn="true"
      :drawer="drawerShow"
      :size="576"
    >
      <template #column>
        <el-form :model="serveForm" label-width="100px" label-position="top">
          <el-form-item label="服务号">
            <el-input v-model.trim="serveForm.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="别名">
            <el-input v-model.trim="serveForm.name" maxlength="50" placeholder="请输入" show-word-limit></el-input>
          </el-form-item>
          <el-form-item>
            <template #label>
              <span>
                IVR语音导航
                <span class="form-tip">呼入此号码后将进入配置的IVR语音导航流程</span>
              </span>
            </template>
            <el-select v-model="serveForm.ivrId" placeholder="请选择" filterable clearable>
              <el-option v-for="item in voiceNavList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-form>
      </template>
    </resize-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, computed } from 'vue'
import searchForm from '@/common/components/base-form/form.vue'
import resizeTable from '@/common/components/resize-table/index.vue'
import resizeDrawer from '@/common/components/resize-drawer/index.vue'
import pageBox from '@common/components/page-box.vue'
import alertMsg from '@common/components/alert/index.vue'
import { getServeNo, updateServeNo } from '@app/call-center/apis/number-manage'
import { ElMessage } from 'element-plus'
import mcCache from '@/common/utils/mc-get-cache'
import { commonStore } from '@/common/store/modules/common'
interface State {
  fieldList: Record<string, unknown>[]
  form: any
  serveForm: any
  tableHeaders: Record<string, unknown>[]
  tableData: Record<string, unknown>[]
  pagingData: any
  drawerShow: boolean
  voiceNavList: any
}

export default defineComponent({
  name: 'serveNum',
  components: { searchForm, resizeTable, resizeDrawer, pageBox, alertMsg },
  // ----------------生命周期-----------------------
  setup() {
    const state: State = reactive({
      fieldList: [
        {
          name: '服务号',
          field: 'fuzzyQuery',
          type: 'text',
          placeholder: '请输入服务号或者别名'
        }
      ],
      form: {
        fuzzyQuery: ''
      },
      serveForm: {
        id: '',
        name: '',
        ivrId: ''
      },
      tableHeaders: [
        { label: '服务号', prop: 'number', show: true },
        { label: '归属地', prop: 'location', show: true },
        { label: '别名', prop: 'name', show: true },
        { label: '语音导航名称', prop: 'ivrName', show: true },
        { label: '操作', prop: 'oprate', show: true }
      ],
      tableData: [],
      pagingData: {
        page: 1,
        total: 0,
        limit: 10
      },
      drawerShow: false,
      voiceNavList: []
    })
    // 获取语音导航的缓存
    const ivrNav = computed(() => {
      return commonStore().publicCache.ivrNav || []
    })
    // 编辑
    const editServeNo = async (row: any) => {
      state.serveForm = { id: row.id, name: row.name, ivrId: row.ivrId }
      state.voiceNavList = ivrNav
      state.drawerShow = true
    }
    // 关闭抽屉
    const closeDraw = () => {
      state.drawerShow = false
    }

    // 关闭抽屉
    const cancelFun = () => {
      state.drawerShow = false
    }

    // 编辑保存
    const saveFun = () => {
      const sendData = {
        id: state.serveForm.id,
        name: state.serveForm.name,
        ivrId: state.serveForm.ivrId
      }
      updateServeNo(sendData).then((res) => {
        if (res && res.success) {
          getServeNos()
          state.drawerShow = false
          ElMessage.success('保存成功')
          mcCache.$updateCache('serveNum', { ...sendData, status: 1 }, 'id', '') // 编辑
        }
      })
    }

    const checkHeadersChange = (checkList: any) => {
      state.tableHeaders = checkList
    }

    const handleCurrentChange = (page: number) => {
      state.pagingData.page = page
      getServeNos()
    }

    const handleSizeChange = (size: number) => {
      state.pagingData.limit = size
      getServeNos()
    }

    // 查询
    const searchFun = () => {
      state.pagingData.page = 1
      getServeNos()
    }

    // 获取表格数据
    const getServeNos = () => {
      const sendData = {
        ...state.form,
        pageSize: state.pagingData.limit,
        pageNumber: state.pagingData.page,
        callAbility: '1,3'
      }
      getServeNo(sendData).then((res) => {
        if (res && res.success) {
          const list = res.data.list || []
          list.forEach((item: any) => {
            const obj: any = commonStore().publicCache.ivrNavObj
            const agentObj: any = obj[item.ivrId] || {}
            item.ivrName = agentObj ? agentObj.name : '--'
            item.statusName = item.status ? '启用' : '停用'
            item.location = item.province && item.district ? item.province + '-' + item.district : ''
          })
          state.tableData = list
          state.pagingData.total = res.data.page.total || 0
        }
      })
    }
    // 获取语音导航的缓存
    const getVoiceLibrary = () => {
      mcCache.$getCache('ivrNav')
    }

    onMounted(async () => {
      getVoiceLibrary()
      getServeNos()
    })

    return {
      ...toRefs(state),
      editServeNo,
      closeDraw,
      cancelFun,
      handleCurrentChange,
      handleSizeChange,
      checkHeadersChange,
      searchFun,
      saveFun
    }
  }
})
</script>

<style lang="stylus" scoped>
.serveNo
  .edit,.delete
      color var(--mc-main-color)
      cursor pointer
  :deep(.serve-pagebox)
    .box
      padding 16px 24px
  .el-alert
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0px 16px;
      gap: 8px;
      width: 100%;
      height: 40px;
      background: linear-gradient(0deg, rgba(28, 97, 241, 0.1), rgba(28, 97, 241, 0.1)), #FFFFFF;
      border-radius: 4px;
      flex: none;
      order: 2;
      align-self: stretch;
      flex-grow: 0;
      font-size: 14px;
      line-height: 40px;
      letter-spacing: 0.001em;
      color: rgba(0, 0, 0, 0.88);
      :deep(.el-icon)
          color var(--mc-link-color)
  :deep(.el-form-item__label)
      color: rgba(0, 0, 0, 0.6);
      font-weight: 500
  :deep(.el-select)
      width 100%
</style>
